<template>
    <custom-page-box>
        <div class="nav-list" :class='{isShow}'>
            <ul>
                <li>
                    <div class="start">
                        <span>信息完善星级</span>
                        <a-rate v-model="starNum" disabled allow-half />
                    </div>
                    <div class="text">
                        <span>公司宣传</span>
                        <p>
                            <span>公司资料</span>
                            <strong
                                :style="{ color: info[0].num > 0 ? '#999' : '' }"
                                @click="handleRouteCompany('1')"
                            >{{ info[0].num > 0 ? '已完善' : '去完善' }}</strong>
                        </p>
                        <p>
                            <span>资质证书 {{ info[1].num }}</span>
                            <strong @click="handleRouteCompany('2')">去添加</strong>
                        </p>
                        <p>
                            <span>专家团队 {{ info[2].num }}</span>
                            <strong @click="handleRouteCompany('3')">去添加</strong>
                        </p>
                    </div>
                </li>
                <li>
                    <div>
                        <p>
                            <span>案例管理</span>
                            <strong @click="handleJump('success-case-update')">去发布</strong>
                        </p>
                        <div v-if='isShow'>
                            已发布<span>{{ infoBase.serviceCase.publishNum }}</span>
                            未通过审核<span>{{ infoBase.serviceCase.failNum }}</span>
                        </div>
                        <h4 v-else>{{ info[3].num }}</h4>
                    </div>
                </li>
                <li>
                    <div>
                        <p>
                            <span>服务报价</span>
                            <strong @click="handleJump('service-manage-update')">去发布</strong>
                        </p>
                        <div v-if='isShow'>
                            已上架<span>{{ infoBase.service.upNum }}</span>
                            已下架<span>{{ infoBase.service.downNum }}</span>
                            未通过审核<span>{{ infoBase.service.failNum }}</span>
                        </div>
                        <h4 v-else>{{ info[4].num }}</h4>
                    </div>
                </li>
                <li v-if='isShow'>
                    <p>基本情况</p>
                    <p><span>入驻时间</span><span>{{ infoBase.enterTime }}</span></p>
                    <p><span>企业关注人数</span><span>{{ infoBase.followNumString || 0 }}人</span></p>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="left">
                <p>平台三方关系</p>
                <img src="~@/assets/images/home/home-left.png" alt="" />
            </div>
            <div class="right">
                <p>平台使用流程</p>
                <img src="~@/assets/images/home/home-right.png" alt="" />
                <div class="QR-code" v-if="url" @click="visible = true">
                    <img :src="`data:image/png;base64,${url}`" alt="" width="80px" height="80px" />
                </div>
            </div>
        </div>
        <a-modal
            :visible="visible"
            :footer="null"
            :centered="true"
            class="QR-code-box"
            @cancel="visible = false"
            :bodyStyle="{ 'text-align': 'center' }"
        >
            <img :src="`data:image/png;base64,${url}`" alt="" width="300px" height="300px" />
        </a-modal>
    </custom-page-box>
</template>

<script>
import { localStorage } from '~/plugins/tools'

export default {
    data () {
        return {
            url: '',
            visible: false,
            info: [
                { name: '公司资料', stars: 0, num: 0 },
                { name: '资质证书', stars: 0, num: 0 },
                { name: '专家团队', stars: 0, num: 0 },
                { name: '案例管理', stars: 0, num: 0 },
                { name: '服务报价', stars: 0, num: 0 }
            ],
            infoBase: {
                serviceCase: {
                    publishNum: 0,
                    failNum: 0
                },
                service: {
                    upNum: 0,
                    failNum: 0,
                    downNum: 0
                },
                followNumString: '',
                enterTime: ''
            },
            isShow: false
        }
    },
    computed: {
        starNum () {
            const list = this.info.map(item => item.stars)
            const num = list.reduce((pre, next) => {
                return pre + next
            }, 0.5)
            return num
        }
    },
    async created () {
        if (process.client && localStorage.getItem('refresh') === 'refresh') {
            localStorage.removeItem('refresh')
            window.location.reload()
        }
        if (process.client && ['4', '5'].includes(localStorage.getItem('userInfo').orgCategoryId)) {
            this.isShow = true
            const response = await this.$ApiServer['home/getHomeInfoBase']()
            if (response.code === 200) {
                this.infoBase = response.data
            }
        }
        const rs = await this.$ApiServer['home/getCode']()
        this.url = rs.data
        const res = await this.$ApiServer['home/getHomeInfo']()
        if (res.code === 200) {
            this.info = res.data
        }
    },
    methods: {
        handleRouteCompany (num) {
            this.$router.push({
                name: 'company-manage-company-info',
                query: {
                    activeKey: num
                }
            })
        },
        handleJump (str) {
            this.$router.push({
                name: str
            })
        }
    }
}
</script>

<style lang="less" scoped>
.nav-list {
    width: 100%;
    height: 180px;
    & > ul {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        li {
            width: calc((100% - 20px) / 3);
            height: 100%;
            border-radius: 6px;
            background: #ffffff;
            padding: 10px 20px;
            .start {
                display: flex;
                align-items: center;
                span {
                    color: #2a2a2a;
                    font-size: 16px;
                    margin-right: 8px;
                }
                .ant-rate {
                    font-size: 16px;
                }
            }
            .text {
                border: 1px solid #ccc;
                margin-top: 10px;
                padding: 10px 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                & > span {
                    font-size: 14px;
                    font-family: PingFang SC;
                    color: #2a2a2a;
                }
                p {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 6px;
                    span {
                        font-size: 14px;
                        color: #666666;
                    }
                    strong {
                        font-weight: 400;
                        cursor: pointer;
                        font-size: 14px;
                        color: #1943dd;
                    }
                }
            }
            & + li {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                & > div {
                    width: 257px;
                    height: 122px;
                    background-size: 100% 100%;
                    p {
                        margin-top: 25px;
                        padding-left: 126px;
                        span {
                            font-size: 18px;
                            color: #2a2a2a;
                        }
                        strong {
                            font-size: 16px;
                            font-weight: bold;
                            cursor: pointer;
                        }
                    }
                    h4 {
                        font-size: 40px;
                        font-family: DIN;
                        line-height: 20px;
                        color: #2a2a2a;
                        margin-top: 14px;
                        padding-left: 141px;
                    }
                    div {
                        width: 100%;
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        line-height: 20px;
                        color: #2A2A2A;
                        position: absolute;
                        left: 177px;
                        top: 104px;
                        span {
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            line-height: 20px;
                            color: #1943DD;
                            margin: 0 10px 0 4px;
                        }
                    }
                }
            }
            &:nth-child(2) {
                & > div {
                    background-image: url('~@/assets/images/home/home-case.png');
                    strong {
                        color: #1943dd;
                    }
                }
            }
            &:nth-child(3) {
                & > div {
                    background-image: url('~@/assets/images/home/home-serve.png');
                    strong {
                        color: #f3993c;
                    }
                }
            }
            &:nth-child(4) {
                display: block;
                padding: 20px 30px 20px 20px;
                p {
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    line-height: 22px;
                    color: #2A2A2A;
                    margin-bottom: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span:last-child {
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        line-height: 22px;
                        color: #999999;
                    }
                }
            }
        }
    }
    &.isShow {
        li {
            width: calc((100% - 30px) / 4);
            &:nth-child(2) {
                justify-content: flex-start;
                & > div {
                    margin-left: 30px;
                }
            }
            &:nth-child(3) {
                justify-content: flex-start;
                & > div {
                    margin-left: 10px;
                    div {
                        left: 156px;
                    }
                }
            }
        }
    }
}

.content {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    height: calc(100% - 190px);
    width: 100%;
    & > div {
        border-radius: 4px;
        position: relative;
        & > img {
            position: absolute;
            height: 75%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        &.left {
            width: calc(52% - 5px);
            height: 100%;
            background-image: url('~@/assets/images/home/home-left-bg.png');
            background-size: 100%;
            background-position: left center;
            background-repeat: no-repeat;
        }
        &.right {
            width: calc(48% - 5px);
            height: 100%;
            position: relative;
            background-image: url('~@/assets/images/home/home-right-bg.png');
            background-size: 100% 100%;
            background-position: left center;
            background-repeat: no-repeat;
            div {
                width: 80px;
                height: 80px;
                align-self: flex-start;
                position: absolute;
                left: 30px;
                bottom: 20px;
            }
            .QR-code {
                img {
                    width: 80px;
                    height: 80px;
                    cursor: pointer;
                }
            }
        }
        p {
            font-size: 16px;
            color: #2a2a2a;
            height: 47px;
            line-height: 47px;
            margin-left: 20px;
            display: inline;
            position: relative;
            &::after {
                content: '';
                width: 100%;
                height: 6px;
                background: linear-gradient(270deg, #ffffff 0%, #009944 100%);
                position: absolute;
                left: 0px;
                bottom: -10px;
            }
        }
    }
}
</style>
